<template>
	<view class="feedbackApp">
		<custom-navi :show-home="false">反馈问题</custom-navi>
		<view class="feedback">
			<view class="feedback-title">
				<text>*</text>请描述你遇到的问题
			</view>
			<view class="feedback-question">
				<view v-for="(item,index) in btnLinst" :key='index' @click="handlePopBtn(index)" class="btn" :class="{optfor:status==index}">
					{{item.txt}}
				</view>
			</view>
			<view class="feedback-text">
				<textarea value="" maxlength="200" @input="handlePopTxt" placeholder="描述你的问题" class="txt"/>
				<view class="counts">
					{{count}}/200
				</view>
			</view>
		</view>
		<view class="upImg">
			<view class="upImg-title">
				上传凭证(不超过3张)
			</view>
			<view class="upImg-img">
				<view class="upload">
				  <view
				    v-for="(item,index) in imgList"
				    :key="index"
				    class="upload-child"
				    @tap="handleImgDetailSet(index)"
				  >
				    <image :src="item.url" mode="widthFix" />
				  </view>
				  <view v-if="addShow" class="addPhoto" @tap="handlerImg"><text class='cuIcon-cameraadd'></text></view>
				</view>
				<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
			</view>
		</view>
		<!-- <view class="contacts">
			<view class="contacts-title">
				<text>*</text>联系人
			</view>
			<view class="contacts-txt">
				王艺超
			</view>
		</view>
		<view class="contacts">
			<view class="contacts-title">
				<text>*</text>联系方式
			</view>
			<view class="contacts-txt">
				137****2788
			</view>
		</view> -->
		<view class="putin" @click="putin">
			提交反馈
		</view>
		<view v-if="upInfo" class="app">
			<custom-navi :show-home="false">反馈问题</custom-navi>
			<view class="app-putin">
				<view class="app-putin-icon">
					<image src="../../../../../static/myicon/putin.png" mode=""></image>
				</view>
				<view class="app-putin-title">
					提交成功
				</view>
				<view class="app-putin-txt">
					您的问题已提交成功，感谢您的反馈~~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CONSTS from '@/src/consts';
	import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import { submitFeedBack  } from '../../api.js'
	export default {
		components: { ImageCropper },
		data(){
			return {
				status:'',// 当前选中的问题下标
				count:'0', // 当前输入的字数
				upInfo:false, // 提交成功页面是否显示
				cj: '',
				addShow:true,
				imgList: [],
				btnLinst:[
					{txt:'账号及门店资质'},
					{txt:'门店信息修改'},
					{txt:'其他问题'},
				],
				form:{
					content:'账号及门店资质',
					phoneType:'2',
					title:'',
					voucher:''
				}
				
			}
		},
		methods:{
			handlePopBtn(index){
				this.status=index
				this.form.title=this.btnLinst[index].txt
			},
			handlePopTxt(e){
				// console.log(e.detail.value)
				this.form.content=e.detail.value
				this.count=e.detail.value.length
			},
			handlerImg () {
			  const _self = this
			  uni.chooseImage({
			    count: 3, //默认9
			    sizeType: ['original', 'compressed'],
			    sourceType: ['album'],
			    success: function (res) {
			      const tempFilePaths = res.tempFilePaths;
			      uni.uploadFile({
			        url: CONSTS.BASE_URL + '/basic/upload/single/store',
			        // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
			        filePath: tempFilePaths[0],
			        name: 'file',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
			          const res = JSON.parse(uploadFileRes.data)
			
			          _self.cj = CONSTS.BASE_URL + '/basic' + res.data
			        }
			      });
			    }
			  })
			},
			confirm (e) {
			  this.cj = ''
			  const _self = this
			  uni.uploadFile({
			    url: CONSTS.BASE_URL + '/basic/upload/single/store',
			    filePath: e.detail.tempFilePath,
			    name: 'file',
			    formData: {
			      'user': 'test'
			    },
			    success: (uploadFileRes) => {
			      const res = JSON.parse(uploadFileRes.data)
			
			      const imgMode = {
			        url: CONSTS.BASE_URL + '/basic' + res.data,
			        path: res.data,
			        title: ""
			      }
			      _self.imgList.push(imgMode)
				  if(_self.imgList.length>=3){
					  _self.addShow=false
				  }
				  // console.log(_self.imgList)
			    }
			  });
			},
			handleImgDetailSet (index) {
				const _self = this
				uni.chooseImage({
				  count: 3, //默认9
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album'],
				  success: function (res) {
				    const tempFilePaths = res.tempFilePaths;
				    uni.uploadFile({
				      url: CONSTS.BASE_URL + '/basic/upload/single/store',
				      // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
				      filePath: tempFilePaths[0],
				      name: 'file',
				      formData: {
				        'user': 'test'
				      },
				      success: (uploadFileRes) => {
				        const res = JSON.parse(uploadFileRes.data)
							
				        _self.cj = CONSTS.BASE_URL + '/basic' + res.data
						_self.imgList.splice(index,1)
						// console.log(_self.imgList)
				      }
				    });
				  }
				})
				
			},
			cancel () {
			  console.log('canceled')
			},
			// putin(){
			// 	// console.log('***提交****')
			// 	// this.upInfo=true
				
			// }
			async putin () {
				let img=[]
				// console.log(this.imgList)
				for(var i=0;i<this.imgList.length;i++){
					img.push(this.imgList[i].path)
				}
				// console.log(img)
				// this.imgList=this.imgList.join(',')
				// this.form.voucher=this.imgList
				const params ={
					content:this.form.content,
					phoneType:this.form.phoneType,
					title:this.form.title,
					voucher:img.join(',')
				}
				// console.log(params)
			  // this.$loading()
			  try {
			    const { data } = await submitFeedBack(params)
			    this.upInfo=true
			    
			  } catch (err) {
			    if (err.code !== 200) {
			      return this.$utils.common.toast.fail(err.data.message);
			    }
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.feedback{
		padding: 20rpx 32rpx;
		height: 360rpx;
		background: rgba(255,255,255,1);
		&-title{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:38rpx;
			color:rgba(80,80,80,1);
			opacity:1;
			text{
				font-size: 28rpx;
				font-family:PingFang SC Regular;
				color:rgba(255, 0, 0, 1);
				margin-right: 8rpx;
			}
		}
		&-question{
			margin-top: 22rpx;
			display: flex;
			.btn{
				margin-right: 20rpx;
				padding: 0 10rpx;
				height:58rpx;
				background:rgba(255,255,255,1);
				border:2rpx solid rgba(230,230,230,1);
				opacity:1;
				border-radius:28rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				text-align: center;
				line-height: 58rpx;
			}
			.optfor{
				background:rgba(12,212,211,0.08);
				border:2rpx solid rgba(12,212,211,1);
				opacity:1;
				border-radius:28rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(12,212,211,1);
				opacity:1;
			}
		}
		&-text{
			height: 200rpx;
			margin-top: 20rpx;
			position: relative;
			.txt{
				width: 680rpx;
				height: 160rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				opacity:1;
			}
			.counts{
				position: absolute;
				right: 0rpx;
				bottom: 10rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				opacity:1;
			}
		}
	}
	.upImg{
		margin:20rpx 0;
		height:264rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		padding: 30rpx;
		&-title{
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(80,80,80,1);
			opacity:1;
		}
	}
	.contacts{
		height:114rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		padding: 0 30rpx;
		line-height: 114rpx;
		border-bottom: 1rpx solid rgba(217,217,217,1);
		view{
			display: inline-block;
		}
		&-title{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
			text{
				font-size:28rpx;
				font-family: PingFang SC Regular;
				font-weight:400;
				color:rgba(255, 0, 0, 1);
				margin-right: 8rpx;
			}
		}
		&-txt{
			float: right;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
		}
	}
	.contacts:last-child{
		border: none;
	}
	.putin{
		width:686rpx;
		height:88rpx;
		background:rgba(12,212,211,1);
		opacity:1;
		margin: 0 auto;
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:88rpx;
		color:rgba(255,255,255,1);
		opacity:1;
		text-align: center;
		margin-top: 400rpx;
		border-radius: 10rpx;
	}
	.upload {
	  padding: 32rpx 30rpx 0 30rpx;
	  display: flex;
	  flex-wrap: wrap;
	  background-color: #ffffff;
	  margin-bottom: 20rpx;
	  &-child {
	    position: relative;
	    margin: 2rpx;
		width: 132rpx;
		height: 132rpx;
		margin-right: 10rpx;
		overflow: hidden;
	    image {
	      width: 132rpx;
		  height: 132rpx;
	    }
	    &-title {
	      position: absolute;
	      bottom: 6rpx;
	      width: 100%;
	      padding: 24rpx;
	      padding-bottom: 18rpx;
	      color: #ffffff;
	      text-overflow: ellipsis;
	      overflow: hidden;
	      background: linear-gradient(
	        180deg,
	        rgba(113, 113, 113, 0) 0%,
	        rgba(0, 0, 0, 0.33) 33%,
	        rgba(3, 3, 3, 1) 100%
	      );
	    }
	  }
	  .addPhoto {
	    margin: 2rpx;
	    width: 132rpx;
	    height: 132rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: rgba(242, 242, 242, 1);
	    border: 1rpx solid rgba(230, 230, 230, 1);
	    font-size: 106rpx;
		overflow: hidden;
		text{
			font-size:52rpx
		}
	  }
	}
	.app{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background:rgba(255,255,255,1);
		z-index: 999;
		&-putin{
			// position: absolute;
			// width: 100%;
			// height: 100%;
			// left: 0;
			text-align: center;
			// background:rgba(255,255,255,1);
			padding: 80rpx 0 0 0;
			&-icon{
				width:142rpx;
				height:142rpx;
				// background:rgba(12,212,211,1);
				border-radius:50%;
				opacity:1;
				overflow: hidden;
				margin: 0 auto;
				margin-top: 88rpx;
				position: relative;
				image{
					// position: absolute;
					width:142rpx;
					height:142rpx;
					// width:300rpx;
					// height:300rpx;
					// left: -45rpx;
					// top: -50rpx;
				}
			}
			&-title{
				margin-top: 40rpx;
				font-size:48rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(80,80,80,1);
				opacity:1;
			}
			&-txt{
				margin-top: 24rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(112,112,112,1);
				opacity:1;
			}
		}
	}
</style>

